<template>
  <div id="category">
<cateNavBar/>
<div class="cateContent">
  <leftList
  :cateLeft="cateLeft" 
  class="left-scroll" 
  :currentIndex="currentIndex"
  @leftClick="leftClick"/>
  
  <scroll class="sub-scroll" id="right-scroll" ref="rightScroll">
    <div>
<cateList :subcate="showSub" @imgload="imgload"/>
    </div>
  </scroll>
</div>

  </div>
</template>

<script>
import leftList from "./childComps/cateMune.vue"
import cateNavBar from "./childComps/cateNavBar.vue"
import cateList from "./childComps/cateList.vue"

import scroll from "components/common/scroll/scroll.vue"

import {getCategory, getSubcategory, getCategoryDetail} from "network/category.js"

  import {POP, NEW, SELL} from "@/common/const.js"
  import {debounce} from "@/common/utils";
  export default {
    name: "Category",
    components: {
      leftList,
      cateNavBar,
      scroll,
      cateList
    },
    computed: {
      showSub() {
        if (this.currentIndex == -1) return 
        return this.categoryDate[this.currentIndex].subcategories.list
      }
    },
    data() {
      return {
        cateLeft: [],
        currentIndex:-1,
        categoryDate:{}
      }
    },
    methods: {
      imgload(){
        this.$refs.rightScroll.bs.refresh()
      },
      _getCategory(){
        getCategory().then(res => {
          this.cateLeft = res.data.category.list
          // console.log(this.cateLeft[0].maitKey);
          for (let i = 0; i < this.cateLeft.length; i++) {
            this.categoryDate[i] = {
              subcategories: {},
              categoryDetail:{
                "pop": [],
                'new': [],
                'sell': []
              }
            }
          }
          this._getSubcategory(0)
        })
      },
      _getSubcategory(index){
        this.currentIndex = index
        const mailKey = this.cateLeft[index].maitKey;
        getSubcategory(mailKey).then(res => {
          this.categoryDate[index].subcategories = res.data
          // console.log(this.categoryDate);
          this.categoryDate = {...this.categoryDate}
          // console.log(this.categoryDate);
          this._getCategoryDetail(POP)
          this._getCategoryDetail(NEW)
          this._getCategoryDetail(SELL)
        })
      },
      _getCategoryDetail(type){
        const mini = this.cateLeft[this.currentIndex].miniWallkey
        getCategoryDetail(mini, type).then(res => {
          this.categoryDate[this.currentIndex].categoryDetail[type] = res
          this.categoryDate = {...this.categoryDate}
          this.$refs.rightScroll.bs.refresh()
        })
      },
      
      leftClick(index) {
        this._getSubcategory(index)
      }
    },
    created() {
this._getCategory()

    }
    
  }
</script>

<style scoped>
  .cateContent{
    height: calc(100vh - 44px - 49px);
    display: flex;
    justify-content: space-between;
  }
.left-scroll{
  height: 100%;
  background-color: #f6f6f6;
  overflow: hidden;
  width: 100px;
}
.sub-scroll{
  width: calc(100% - 100px);
  height: 100%;
  overflow: hidden;
}
</style>
